<template>
    <el-row>
        <el-col :span="12">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>CPU</span>
                    </div>
                </template>
                <el-descriptions direction="vertical">
                    <el-descriptions-item label="用户使用率">{{ resource.us }}</el-descriptions-item>
                    <el-descriptions-item label="系统使用率">{{ resource.sy }}</el-descriptions-item>
                    <el-descriptions-item label="空闲使用率">{{ resource.id }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>内存</span>
                    </div>
                </template>
                <el-descriptions direction="vertical">
                    <el-descriptions-item label="总内存">{{ resource.tm }}</el-descriptions-item>
                    <el-descriptions-item label="已用内存">{{ resource.um }}</el-descriptions-item>
                    <el-descriptions-item label="空闲内存">{{ resource.im }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue'

import { source } from '@/api/ops/machine'

const prop = defineProps({
    token: {
        type: String,
        required: true,
    },
})

const state = reactive<any>({
    resource: {},
})
const { resource } = toRefs(state)

const init = async () => {
    const res = await source(prop.token)
    resource.value = res.data
}


onMounted(() => {
    init()
})
</script>

<style scoped lang="scss"></style>